<template>
    <div ref="container" class="container">
        <div class="content">
            <!-- hot -->
            <div class="hot">
            <div class="hot-title">热门城市</div>
            <ul class="hot-list">
                <li class="hot-item" v-for="item in hotCities" 
                :key="item.id"
                @click="changeCityName(item.name)">
                    {{item.name}}
                </li>
            </ul> 
            </div>

            <!-- sort -->
            <div class="sort">
            <div class="sort-title">字母排序</div>
            <ul class="sort-list">
                <li class="sort-item" v-for="(item,key) in cities" :key="key"
                @click="changeSort(key)">
                    {{key}}
                </li>
            </ul> 
            </div>

            <!-- list -->
            <div class="list">
                <div v-for="(item,key) in cities" :key="key"
                :ref="key">
                <div class="list-title">{{key}}</div>
                    <ul class="list-msg">
                        <li class="list-item" v-for="val in item" 
                        :key="val.id"
                         @click="changeCityName(val.name)">
                            {{val.name}}
                        </li>
                    </ul> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapMutations} from 'vuex'
import BScroll from 'better-scroll'
export default {
    props:["hotCities","cities"],
    data(){
        return{
            scroll:" "
        }
    },
    mounted(){
        // let height=document.getElementsByClassName("content")[0].offsetHeight     
        // console.log(`${height}px`)
        // console.log(`${content}`)
        // content.style="height:height"
        // let height=document.documentElement.scrollHeight
        // let container1=document.getElementsByClassName("container")[0]
        // let content=document.getElementsByClassName("content")[0]        
        // let height=document.getElementsByClassName("content")[0].scrollHeight
        // console.log(height)
        // container.style=`height:${height}+px`
        // container1.style.height=height+'px'
        // content.style.height=height+'px'        
        // /content.style=`height:${height}+px`
        let container = this.$refs['container'];
        this.scroll = new BScroll(container)
    },
    methods:{
        changeSort(key){
            // console.log(key)
            // console.log(this.$refs[key][0])
            this.scroll.scrollToElement(this.$refs[key][0])
        },
        changeCityName(cityName){
            this.changeCity(cityName);
            this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
    },
}
</script>

<style scoped>
.container{
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    top: .88rem;
    background: #f5f5f5f5;
}
.content{
    height:12550px;
}
.list-title{
    font-size: 0.24rem;
    color: #212121;
    padding: .2rem .3rem;
}
.list-msg{
    position: relative;    
    background: #fff;
    overflow: hidden;
}
.list-msg:before{
    content: " ";
    position: absolute;
    left: 25%;
    width: 25%;
    height: 100%;
    border-left: .02rem solid #ddd;    
    border-right: .02rem solid #ddd;
}
.list-msg:after{
    content:" ";
    position: absolute;
    left: 75%;
    width: 0;
    height: 100%;
    border-left: .02rem solid #ddd;   
}
.list-item{
    position: relative;
    font-size: 0.28rem;
    width: 25%;
    text-align: center;
    background-color: #fff;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
}

.sort-title{
    font-size: 0.24rem;
    color: #212121;
    padding: .2rem .3rem;
}
.sort-list{
    position: relative;
    overflow: hidden;
    background:#fff;
    font-size: 0.24rem;
    color: #212121;
}
.sort-item{
    width: 16.666%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
}

.hot-title{
    font-size: 0.24rem;
    color: #212121;
    padding: .2rem .3rem;
}
.hot-list{
    position: relative;
    overflow: hidden;
    background:#fff;
    font-size: 0.28rem;
    color: #212121;
}
.hot-list:before{
    content: " ";
    position: absolute;
    height: 100%;
    width: 33.33333%;
    left: 33.33333%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
}
.hot-item{
    position: relative;
    width: 33.3333%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
}
</style>